<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<meta charset="utf-8">
<link th:href="@{/css/plugins/bootstrap-date/bootstrap-datetimepicker.min.css}" href="/static/css/plugins/bootstrap-date/bootstrap-datetimepicker.min.css" rel="stylesheet">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
        <form action="" class="form-horizontal"  role="form">
            <fieldset>
                <legend style="text-align: center;">销售额变化趋势图</legend>
                <div class="form-group">
                    <label for="dtp_input1" class="col-md-2 control-label">选择年份</label>
                    <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                        <input class="form-control" size="16" type="text" value="2019" id="datetime" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                    <input type="hidden" id="dtp_input1" value="" /><br/>
                </div>

                <div class="form-group">
                    <label for="dtp_input1" class="col-md-2 control-label">选择月份</label>
                    <div class="col-md-5">
                        <select class="form-control" name="" id="month" style="width: 425px;display: inline-block">
                            <option value="">请选择</option>
                            <option value="1">1月</option>
                            <option value="2">2月</option>
                            <option value="3">3月</option>
                            <option value="4">4月</option>
                            <option value="5">5月</option>
                            <option value="6">6月</option>
                            <option value="7">7月</option>
                            <option value="8">8月</option>
                            <option value="9">9月</option>
                            <option value="10">10月</option>
                            <option value="11">11月</option>
                            <option value="12">12月</option>
                        </select>
                        <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button" id="search" style="float: none !important;"><strong>搜 索</strong>
                        </button>
                    </div>
                </div>


            </fieldset>
        </form>

    <!--<div class="form-group" style="margin-left: 170px">-->
        <!--<div class="col-sm-8">-->
            <!--<select class="form-control" name="" id="month" style="width: 425px;display: inline-block">-->
                <!--<option value="">请选择</option>-->
                <!--<option value="1">1月</option>-->
                <!--<option value="2">2月</option>-->
                <!--<option value="3">3月</option>-->
                <!--<option value="4">4月</option>-->
                <!--<option value="5">5月</option>-->
                <!--<option value="6">6月</option>-->
                <!--<option value="7">7月</option>-->
                <!--<option value="8">8月</option>-->
                <!--<option value="9">9月</option>-->
                <!--<option value="10">10月</option>-->
                <!--<option value="11">11月</option>-->
                <!--<option value="12">12月</option>-->
            <!--</select>-->
            <!--<button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="button" id="search" style="float: none !important;"><strong>搜 索</strong>-->
            <!--</button>-->
        <!--</div>-->
    <!--</div>-->

    <div id="chart" style="height: 400px;width: 100%;">

    </div>


</div>

<div th:include="include :: footer"></div>
<script th:src="@{/js/jquery.min.js?v=2.1.4}" src="/js/jquery.min.js?v=2.1.4"></script>
<script th:src="@{/lib/echarts/echarts.min.js}" src="/static/lib/echarts/echarts.min.js"></script>
<script th:src="@{/js/plugins/bootstrap-date/bootstrap-datetimepicker.js}" type="text/javascript" src="/static/js/plugins/bootstrap-date/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script th:src="@{/js/plugins/bootstrap-date/locales/bootstrap-datetimepicker.zh-CN.js}" type="text/javascript" src="/static/js/plugins/bootstrap-date/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

<script type="text/javascript">
    (function () {
        var endtime=new Date();
        $("#datetime").val(endtime.getFullYear());

        $('.form_datetime').datetimepicker({
            startView: 4,
            minView: 4,
            viewMode: 'years',
            format: 'yyyy'     //如需要月份则为：MM/YYYY
        });


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));
        var year=$("#datetime").val();
        var month=$("#month").val();
        $.ajax({
            url:getProjectName()+"/echarts/json/order/amount",
            // url:"/echarts/json/test",
            data:{"year":year,"month":month},
            dataType:"json",
            success:function(result) {
                if (result.code === 0){
                    myChart.setOption(result.data);
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
        $("#search").click(function () {
            var year=$("#datetime").val();
            var month=$("#month").val();
            $.ajax({
                url:getProjectName()+"/echarts/json/order/amount",
                // url:"/echarts/json/test",
                data:{"year":year,"month":month},
                dataType:"json",
                success:function(result) {
                    if (result.code === 0){
                        myChart.setOption(result.data);
                    }
                },
                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            });
        });
    })();
</script>
</body>
</html>